import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class List extends Component {

  state = {
    userList:[],
    isFirst:true,
    isLoading:false,
    err:''
  }

  componentDidMount() {
    this.token = PubSub.subscribe("search",(msg,data)=>{
      console.log(data);
      this.setState(data)
    })
  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }
  render() {
    const {isFirst,isLoading,err,userList} = this.state
    return (
      <div className="row">
        {
          isFirst? <h2>欢迎访问，请输入关键字搜索</h2> : 
          isLoading? <h3>努力加载中。。。。</h3>:
          err ? <h3>{err}</h3>:
          userList.map(item => {
            return (
              <div className="card" key={item.id}>
                <a href={item.html_url} target="_blank">
                  <img src={item.avatar_url} style={{ width: '100px' }} />
                </a>
                <p className="card-text">{item.login}</p>
              </div>
            )
          })
        }
      </div>
    )
  }
}
